import Vue from 'vue'
/**
 * 表单输入框根据组件的canEdit自动切换编辑状态
 * v-can-edit:组件can-edit=0显示只读文本，can-edit=1显示输入框
 * v-can-edit=1：显示输入框，忽略组件canEdit值
 * v-can-edit=0：显示只读文本，忽略组件canEdit值
 */
Vue.directive('can-edit', {
    bind(el, binding, vnode) {
        let canEdit = binding.value
        if (canEdit === undefined) {
            if (vnode.context.curTN !== undefined) {
                canEdit = vnode.context.curTN.tnCanEdit
            } else {
                canEdit = vnode.context.canEdit
            }
        }

        if (canEdit !== 1) {
            if (el.classList.contains('el-radio-group')) {
                const radiogroup = el.querySelectorAll("[type='radio']")
                radiogroup.forEach(radio => {
                    radio.disabled = true
                    radio.parentElement.classList.add('is-disabled')
                })
                for (let i = 0; i < el.children.length; i++) {
                    el.children[i].classList.add('is-disabled')
                }

                el.disabled = true
            } else if (el.classList.contains('el-checkbox-group')) {
                const checkboxgroup = el.querySelectorAll("[type='checkbox']")
                checkboxgroup.forEach(checkbox => {
                    checkbox.disabled = true
                    checkbox.parentElement.classList.add('is-disabled')
                })
                for (let i = 0; i < el.children.length; i++) {
                    el.children[i].classList.add('is-disabled')
                }

                el.disabled = true
            }
        }
    },
    inserted(el, binding, vnode) {
        let canEdit = binding.value
        if (canEdit === undefined) {
            if (vnode.context.curTN !== undefined) {
                canEdit = vnode.context.curTN.tnCanEdit
            } else {
                canEdit = vnode.context.canEdit
            }
        }

        if (canEdit !== 1) {
            if (el.classList.contains('el-select')) {
                let pnode = el.parentElement
                while (pnode.tagName !== 'TD') {
                    pnode = pnode.parentElement
                }
                const selected = el.querySelector('.selected')
                if (selected === null) {
                    pnode.innerHTML = ''
                } else {
                    pnode.innerHTML = selected.innerText
                }
            } else if (el.classList.contains('el-date-editor')) {
                let pnode = el.parentElement
                while (pnode.tagName !== 'TD') {
                    pnode = pnode.parentElement
                }
                let name = vnode.data.model.expression
                if (name.split('.').length > 1) name = name.split('.')[1]
                let input = el.querySelector('input[name="' + name + '"]')
                if (input === null) input = el.querySelector('input')
                if (input !== null) {
                    pnode.innerHTML = input.value
                }
            } else if (!el.disabled) {
                let pnode = el.parentElement
                while (pnode.tagName !== 'TD') {
                    pnode = pnode.parentElement
                }
                const value = (vnode.data.model.value === null || vnode.data.model.value === undefined) ? '' : vnode.data.model.value
                if (el.querySelector('.el-textarea__inner') !== null) {
                    pnode.innerHTML = "<div class='textarea-content'>" + value.replace(/\r\n/g, '<br>') + '</div>'
                } else {
                    pnode.innerHTML = value
                }
            }
        }
    }
})
